import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../controllers/product_model_controller.dart';
import '../../../utils/themes/app_theme.dart';
import '../../../translations/app_translations.dart';

class ProductModelView extends GetView<ProductModelController> {
  const ProductModelView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final themeExt = AppTheme.extensionOf(context);
    
    return Scaffold(
      appBar: AppBar(
        title: Text(LocaleKeys.totalModels.tr),
        centerTitle: true,
      ),
      body: RefreshIndicator(
        onRefresh: () => controller.refreshProductModels(),
        child: Obx(() {
          if (controller.isLoading.value) {
            return const Center(
              child: CircularProgressIndicator(),
            );
          }
          
          if (controller.productModels.isEmpty) {
            return Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Icon(
                    Icons.inventory_2_outlined,
                    size: 64,
                    color: themeExt.textSecondary.withOpacity(0.5),
                  ),
                  const SizedBox(height: 16),
                  Text(
                    LocaleKeys.noDevices.tr,
                    style: TextStyle(
                      fontSize: 16,
                      color: themeExt.textSecondary,
                    ),
                  ),
                  const SizedBox(height: 16),
                  ElevatedButton(
                    onPressed: controller.refreshProductModels,
                    child: Text(LocaleKeys.retry.tr),
                  ),
                ],
              ),
            );
          }
          
          return Stack(
            children: [
              ListView.builder(
                controller: controller.scrollController,
                padding: const EdgeInsets.all(16),
                itemCount: controller.productModels.length + (controller.hasMoreData.value ? 1 : 0),
                itemBuilder: (context, index) {
                  if (index == controller.productModels.length) {
                    if (controller.isLoadingMore.value) {
                      return const Center(
                        child: Padding(
                          padding: EdgeInsets.symmetric(vertical: 16),
                          child: CircularProgressIndicator(),
                        ),
                      );
                    }
                    return const SizedBox.shrink();
                  }
                  
                  final product = controller.productModels[index];
                  final typeColor = controller.getTypeIconColor(product.nodeType);
                  final statusColor = controller.getStatusColor(product.status);
                  final statusBgColor = statusColor.withOpacity(0.1);
                  
                  return Card(
                    clipBehavior: Clip.antiAlias,
                    margin: const EdgeInsets.only(bottom: 16),
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(themeExt.cardRadius),
                    ),
                    child: InkWell(
                      onTap: () => controller.viewProductModelDetail(product.productId),
                      child: Padding(
                        padding: const EdgeInsets.all(16),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Row(
                              children: [
                                CircleAvatar(
                                  backgroundColor: typeColor.withOpacity(0.1),
                                  child: Icon(_getProductTypeIcon(product.nodeType), color: typeColor),
                                ),
                                const SizedBox(width: 12),
                                Expanded(
                                  child: Column(
                                    crossAxisAlignment: CrossAxisAlignment.start,
                                    children: [
                                      Text(
                                        product.productName ?? LocaleKeys.unknownProduct.tr,
                                        style: const TextStyle(
                                          fontSize: 16,
                                          fontWeight: FontWeight.bold,
                                        ),
                                      ),
                                      const SizedBox(height: 4),
                                      Text(
                                        'ID: ${product.productId ?? LocaleKeys.unknown.tr} | ${_getNodeTypeText(product.nodeType)}',
                                        style: TextStyle(
                                          fontSize: 12,
                                          color: themeExt.textSecondary,
                                        ),
                                      ),
                                    ],
                                  ),
                                ),
                                Container(
                                  padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
                                  decoration: BoxDecoration(
                                    color: statusBgColor,
                                    borderRadius: BorderRadius.circular(themeExt.tagRadius),
                                  ),
                                  child: Text(
                                    controller.getStatusText(product.status),
                                    style: TextStyle(
                                      fontSize: 12,
                                      color: statusColor,
                                      fontWeight: FontWeight.bold,
                                    ),
                                  ),
                                ),
                              ],
                            ),
                            const SizedBox(height: 16),
                            Divider(color: themeExt.divider),
                            const SizedBox(height: 8),
                            Row(
                              children: [
                                _buildInfoItem(
                                  context,
                                  icon: Icons.vpn_key,
                                  label: LocaleKeys.productKey.tr,
                                  value: product.productKey ?? LocaleKeys.unknown.tr,
                                ),
                                const SizedBox(width: 16),
                                _buildInfoItem(
                                  context,
                                  icon: Icons.sync_alt,
                                  label: LocaleKeys.protocol.tr,
                                  value: product.protocolType.toUpperCase() ?? LocaleKeys.unknown.tr,
                                ),
                              ],
                            ),
                            const SizedBox(height: 8),
                            Row(
                              children: [
                                _buildInfoItem(
                                  context,
                                  icon: Icons.description,
                                  label: LocaleKeys.dataFormat.tr,
                                  value: _getDataFormatText(product.dataFormat),
                                ),
                                const SizedBox(width: 16),
                                _buildInfoItem(
                                  context,
                                  icon: Icons.security,
                                  label: LocaleKeys.authType.tr,
                                  value: _getAuthTypeText(product.authenticationType),
                                ),
                              ],
                            ),
                          ],
                        ),
                      ),
                    ),
                  );
                },
              ),
              Positioned(
                top: 0,
                left: 0,
                right: 0,
                child: Obx(() => controller.isRefreshing.value
                  ? const LinearProgressIndicator(minHeight: 2)
                  : const SizedBox.shrink()
                ),
              ),
            ],
          );
        }),
      ),
    );
  }
  
  Widget _buildInfoItem(
    BuildContext context, {
    required IconData icon,
    required String label,
    required String value,
  }) {
    final themeExt = AppTheme.extensionOf(context);
    
    return Expanded(
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Icon(icon, size: 14, color: themeExt.textSecondary),
          const SizedBox(width: 4),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  label,
                  style: TextStyle(
                    fontSize: 12,
                    color: themeExt.textSecondary,
                  ),
                ),
                const SizedBox(height: 2),
                Text(
                  value,
                  style: const TextStyle(fontSize: 14),
                  overflow: TextOverflow.ellipsis,
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
  
  IconData _getProductTypeIcon(int? nodeType) {
    switch (nodeType) {
      case 1: return Icons.devices;
      case 2: return Icons.router;
      case 3: return Icons.device_hub;
      default: return Icons.device_unknown;
    }
  }
  
  String _getNodeTypeText(int? nodeType) {
    switch (nodeType) {
      case 1: return LocaleKeys.productTypeDevice.tr;
      case 2: return LocaleKeys.productTypeGateway.tr;
      case 3: return LocaleKeys.productTypePlatform.tr;
      default: return LocaleKeys.statusUnknown.tr;
    }
  }
  
  String _getDataFormatText(int? dataFormat) {
    switch (dataFormat) {
      case 1: return 'JSON';
      case 2: return 'Binary';
      case 3: return 'Custom';
      default: return LocaleKeys.unknown.tr;
    }
  }
  
  String _getAuthTypeText(int? authType) {
    switch (authType) {
      case 1: return 'Device Key';
      case 2: return 'Certificate Auth';
      case 3: return 'Device ID Auth';
      default: return LocaleKeys.unknown.tr;
    }
  }
} 